<template>
    <div class="teacherList">
      <el-form
        ref="formInlineRef"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item prop="nickname" label="用户昵称">
          <el-input
            v-model="formInline.nickname"
            placeholder="请输入用户昵称"
            clearable
          />
        </el-form-item>
  
        <el-form-item prop="courseTitle" label="课程名称">
          <el-input
            v-model="formInline.courseTitle"
            placeholder="请输入课程名称"
            clearable
          />
        </el-form-item>
  
        <el-form-item prop="phone" label="用户手机号">
          <el-input
            v-model="formInline.phone"
            placeholder="请输入用户手机号"
            clearable
          />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="getList"
            >查询</el-button
          >
          <el-button :icon="Refresh" @click="resetForm(formInlineRef)"
            >清空</el-button
          >
        </el-form-item>
      </el-form>
      <el-button type="danger" :icon="CirclePlus" @click="OrderAdd"
        >生成订单</el-button
      >
      <el-button type="danger" :icon="Delete"  @click="delMore" >批量删除</el-button>
      <!-- 表格组件 -->
  
      <el-table :data="tableData" border stripe  @selection-change="handleSelection">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="序号" width="80"> </el-table-column>
        <el-table-column prop="orderNo" label="订单号" width="170" />
        <el-table-column prop="courseTitle" label="课程名称" with="150"></el-table-column>
        <el-table-column label="课程封面" width="150">
            <template #default="scope">
              <div class="courseCover">
                <img
                  :src="scope.row.courseCover"
                  alt=""
                  style="width: 130px; height: 100px"
                />
              </div>
            </template>
          </el-table-column>
        <el-table-column prop="teacherName" label="讲师名称" width="200" />
        <el-table-column prop="nickname" label="用户名称" width="100" />
        <el-table-column prop="phone" label="手机号" width="160" />
        <el-table-column prop="totalFee" label="金额" width="160" />
        <el-table-column prop="status" label="订单状态" width="160" >
        <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="success">未支付</el-tag>
            <el-tag v-if="scope.row.status === 1">已支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="warning" link @click="toEdit(scope.row.id)"
              ><el-icon>
                <EditPen /> </el-icon
              >修改</el-button
            >
            <el-button type="danger" link @click="del(scope.row.id)"
              ><el-icon>
                <Delete /> </el-icon
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <!-- 给当前组件使用中文包 -->
      <el-config-provider :locale="locale">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40, 50]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getList"
          @current-change="getList"
        />
      </el-config-provider>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive } from "vue";
  import {
    Search,
    Edit,
    Delete,
    Refresh,
    CirclePlus,
  } from "@element-plus/icons-vue";
  import type { Action, FormInstance } from "element-plus";
  import { useRouter } from "vue-router";
  // 引入中文包
  import zhCn from "element-plus/es/locale/lang/zh-cn";
  // 消息提示
  import { ElMessage, ElMessageBox, SCOPE } from "element-plus";
  import axios from "../../assets/js/axios";
  import { number } from "echarts";

  
  // 分页器数据
  const locale = zhCn;
  const router = useRouter();
  const formInlineRef = ref<FormInstance>();
  const currentPage4 = ref(1);
  const pageSize4 = ref(4);
  const small = ref(false);
  const background = ref(true);
  const disabled = ref(false);
  const total = ref(0);
  // 搜索表单数据
  const formInline = reactive({
    nickname: "",
    courseTitle: "",
    phone: "",
  });
  // 表格数据 响应式数据
  const tableData = ref([]);
  const selectDate = ref<Array<any>>([]);
  //表格选择事件
  const handleSelection = (val: Array<any>) => {
    console.log(val);
    selectDate.value = val.map((item) => item.id);
  };
  
  // 点击清空按钮
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    // 调用表单重置方法
    formEl.resetFields();
    formInline.nickname="",
    formInline.courseTitle="",
    formInline.phone="",
    getList();
  };
  
  // 点击删除
  const del = (id: number) => {
    ElMessageBox.alert("确认删除吗？", "提示", {
      // if you want to disable its autofocus
      // autofocus: false,
      confirmButtonText: "确认",
      callback: (action: Action) => {
        console.log(action);
        if (action === "confirm") {
          axios.del("/serviceedu/edu-order/delOrder/" + id,{} ).then((res: any) => {
            if (res.code === 200) {
              //提示删除成功
              ElMessage({
                message: "删除数据成功",
                type: "success",
              });
              // 刷新列表
              getList();
            }
          });
        }
      },
    });
  };
  
  //点击批量删除
  const delMore = () => {
    if (selectDate.value.length > 0) {
      //删除
      //弹出删除提示框
      ElMessageBox.alert("您确认删除吗？", "提示", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "确认",
        callback: (action: Action) => {
          console.log(action);
          if (action === "confirm") {
              axios.del("/serviceedu/edu-order/delMoreOrder?ids="+selectDate.value,{}).then((res: any) => {
              if (res.code == 200) {
                ElMessage({
                  type: "success",
                  message: "删除角色成功",
                });
                getList()
              }
            });
          }
        },
      });
    } else {
      //提示
      ElMessage({
        message: "Congrats, this is a success message.",
        type: "success",
      });
    }
  };
  // 分页器事件
  
  // 点击编辑
  const toEdit = (id: number) => {
    // 跳转添加页面
    router.push({ path: "/orderAdd", query: { id: id } });
  };
  
  // 定义分页+条件请求方法
  const getList = () => {
    axios
      .get("/serviceedu/edu-order/getPageBatchs", {
        page: currentPage4.value,
        size: pageSize4.value,
        nickname: formInline.nickname,
        courseTitle: formInline.courseTitle,
        phone: formInline.phone,
      })
      .then((res: any) => {
      console.log(res);
      // 接收总条数
      total.value = res.data.total;
      // 接收列表数据
      tableData.value = res.data.list;
    });
  };
  // 调用用户初始化查询数据方法
  getList();
  
  const OrderAdd = () => {
    router.push("/orderAdd");
  };
  </script>
  
  <style lang="less" scoped>
  .demo-form-inline {
    .el-input {
      --el-input-width: 210px;
    }
  
    .el-select {
      --el-select-width: 210px;
    }
  }
  
  .demo-form-inline {
    .el-select {
      --el-select-width: 210px;
    }
  }
  
  .el-table {
    margin: 20px 0;
  }
  </style>